<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./clientTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="head">
        <title>Technology product</title>
    </ui:define>

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">
        <h:form>
            <h2>Category</h2>
            <ul class="categories_list">
                <ui:repeat value="#{categoryBean.categoies}" var="c">
                    <li>
                        <h:commandLink action="#{productBean.showProductDetails(
                                                 productBean.getIdString(c.categoryID))}">
                                       #{c.categoryName}
                        </h:commandLink>
                    </li>
                </ui:repeat>
            </ul>
        </h:form>
    </ui:define>

    <ui:define name="content">
        <h:form>
            <ui:repeat value="#{productBean.products}" var="p" varStatus="count">
                <h:panelGroup rendered="${(count.index+1)%3==0}">
                    <div class="product_box">
                        <h3>#{p.productName}</h3>
                        <div class="image_wrapper"> 
                            <h:commandLink action="#{productBean.showDetail(p)}" target="_parent">
                                <img src="#{p.imagePath}" alt="#{p.productName}" style="width: 190px;"/>
                            </h:commandLink> 
                        </div>
                        <p class="price">Price: #{p.price}</p>
                        <h:commandLink action="#{cartBean.addCart(p.productID)}" value="Buy Now"/>
                    </div>
                    <div class="cleaner"></div>
                </h:panelGroup>
                <h:panelGroup rendered="${not ((count.index+1)%3==0)}">
                    <div class="product_box margin_r35">
                        <h3>#{p.productName}</h3>
                        <div class="image_wrapper">
                            <h:commandLink action="#{productBean.showDetail(p)}" target="_parent">
                                <img src="#{p.imagePath}" alt="#{p.productName}" style="width: 190px;"/>
                            </h:commandLink> 
                        </div>
                        <p class="price">Price: #{p.price}</p>
                        <h:commandLink action="#{cartBean.addCart(p.productID)}" value="Buy Now"/>
                    </div>
                </h:panelGroup>
            </ui:repeat>

            <div class="button_01">
                <a href="#">View All</a>
            </div>
        </h:form>
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
